<template>
	<view class="container">
		<view class="container_text paddingleft">
			<text>所在圈子：</text>
			<h1><text class="minImage">#</text>{{productList.circleName}}</h1>
		</view>

		<view class="container_user paddingleft">
			<view class="container_user_img">
				<image :src="productList.avatar" mode="aspectFill"></image>
			</view>
			<view class="container_user_title">
				<h1>{{productList.productName}}</h1>
				<text>¥{{productList.price}}起</text>
			</view>
		</view>

		<view class="container_user_score paddingleft">
			<view class="container_user_score_left">
				<text>综合评分：</text>
				<van-rate :value="dynamic.ratevalue" void-color="#e2e2e2" void-icon="star" @change="onrateChange" />
			</view>
			<view class="container_user_score_right">
				<text v-if="dynamic.ratevalue == 1">有点失望</text>
				<text v-if="dynamic.ratevalue == 2">还凑合吧</text>
				<text v-if="dynamic.ratevalue == 3">挺值得的</text>
				<text v-if="dynamic.ratevalue == 4">下次还来</text>
				<text v-if="dynamic.ratevalue == 5">强烈推荐！</text>
			</view>
		</view>

		<view class="paddingleft">
			<view class="container_input">
				<textarea class="container_input_box" maxlength="2000" placeholder-style="color:rgba(61, 61, 61, 0.5)"
					placeholder="分享此刻的想法..." @input="textareaInput" />
				<text class="container_input_abso">{{textareaList}}/2000</text>
				<!-- <image class="minImage" src="/static/picture.png" mode="widthFix"></image> -->
				<!-- <image class="minImage minImage1" src="/static/invite.png" mode="widthFix"></image> -->
			</view>
		</view>

		<view class="container_image paddingleft">
			<tui-upload :header="header" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
			<!-- <view v-if="dynamic.imgArr.length !== 0" class="container_image_box" v-for="(item,i) in dynamic.imgArr" :key="i">
        <image :src="item.link" mode="aspectFill"></image>
        <image class="minImage" src="/static/images/mine/no.png" mode="aspectFill"
          @click="CloseImage(dynamic.imgArr,i)"></image>
      </view>
      <view class="container_image_addbox" @click="getImg(dynamic.imgArr)">
        <view class="container_image_add">
          <image src="/static/add.png" mode="widthFix"></image>
        </view>
        <text v-if="dynamic.imgArr.length === 0">添加标题图片，最多3张</text>
      </view> -->
		</view>

		<!-- 按钮 -->
		<view class="container_btn">
			<button type="default" :class="disabledShow?'container_btn_box':''" :disabled="disabledShow"
				@click="addPublished">立即发布</button>
		</view>
	</view>
</template>

<script>
	import {
		CLIENT_SECRET,
		TENANT_ID
	} from '@/config/const'
	import {
		HTTP_REQUEST_URL,
		HEADER,
		TOKEN_HEADER
	} from '@/config/app.js';
	import {
		removeFile,
	} from "@/api/user.js";
	import {
		adddynamic
	} from '@/api/comment.js'
	import {
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				textareaList: 0,
				disabledShow: true,
				dynamic: {
					textareaValue: '',
					imgArr: [],
					associatedProductId: '',
					// 评分
					ratevalue: 3,
				},
				addshow: false,
				// 上一页数据
				productList: {},
				serverUrl: HTTP_REQUEST_URL + '/blade-resource/oss/endpoint/put-file',
				header: {}
			};
		},
		computed: {
			...mapGetters('m_user', ['token', 'isLogin'])
		},
		onLoad(option) {
			// console.log(option)
			this.productList = option

			this.header = {
				"Content-Type": "multipart/form-data",
				'Authorization': `Basic ${CLIENT_SECRET}`,
				'Tenant-Id': TENANT_ID,
				'Blade-Auth': 'Bearer ' + this.token
			}
		},
		methods: {
			textareaInput(e) {
				// console.log(e)
				if (e.detail.cursor > 0) {
					this.disabledShow = false
				} else {
					this.disabledShow = true
				}
				this.textareaList = e.detail.cursor
				this.dynamic.textareaValue = e.detail.value
			},
			onrateChange(e) {
				this.dynamic.ratevalue = e.detail
			},
			result: function(e) {
				this.dynamic.imgArr = e.imgArr;
			},
			remove: function(e) {
				//移除图片
				if (e.file && e.file.length > 0) {
					let file = e.file[0]
					let filename = file.substring(file.lastIndexOf("upload"))
			
					removeFile(filename);
				}
			},
			addPublished() {
				const article = {
					articleType: 2,
					postsContent: this.dynamic.textareaValue,
					sliderImgs: this.dynamic.imgArr.join(','),
					associatedProductId: this.productList.productId,
					score: this.dynamic.ratevalue,
					associatedCategoryId: this.productList.circleId
				}
				adddynamic(article).then(res => {
					// console.log(res)

					uni.report('Comment', '点评');
					uni.navigateBack()
					this.$util.Tips({
						title: '发布点评成功！'
					});
				}).catch(res => {
					return this.$util.Tips({
						title: res
					});
				})

			},
		}
	}
</script>

<style lang="scss">
	.container {
		// padding: 0rpx 24rpx;
		padding-bottom: 80px;

		.paddingleft {
			padding-left: 24rpx !important;
			padding-right: 24rpx !important;
		}

		.container_text1 {
			border: none !important;
		}

		.container_text {
			display: flex;
			color: rgba(61, 61, 61, 0.5);
			font-size: 30rpx;
			padding: 40rpx 0;
			border-bottom: 1rpx solid #ededed;
			display: flex;
			align-items: center;

			/deep/ .van-cell {
				padding: 0 !important;
			}

			/deep/ .van-field__body {
				width: 550rpx;
			}

			.minImage {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 34rpx;
				background-color: rgba(253, 211, 56, 1);
				margin: 0 10rpx;
			}

			h1 {
				color: rgba(61, 61, 61, 1);
				font-size: 30rpx;
			}
		}

		.container_user {
			display: flex;
			align-items: center;
			padding: 45rpx 0;

			.container_user_img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.container_user_title {
				height: 120rpx;
				margin-left: 27rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				h1 {
					color: rgba(61, 61, 61, 1);
					font-size: 36rpx;
				}

				text {
					color: rgba(255, 87, 51, 1);
					font-size: 30rpx;
				}
			}
		}

		.container_user_score {
			display: flex;
			justify-content: space-between;
			color: rgba(61, 61, 61, 0.5);
			font-size: 30rpx;
			margin-bottom: 40rpx;

			.container_user_score_left {
				display: flex;
				align-items: center;
			}
		}

		.container_input {
			position: relative;
			// width: 704rpx;
			height: 380rpx;
			background-color: rgba(247, 247, 247, 1);
			border-radius: 10rpx;
			margin-top: 5rpx;
			padding: 29rpx 36rpx;
			box-sizing: border-box;
			font-size: 26rpx;


			.container_input_box {
				width: 100%;
				height: 260rpx !important;
			}

			.container_input_abso {
				position: absolute;
				bottom: 30rpx;
				right: 50rpx;
				color: rgba(61, 61, 61, 0.5);
			}

			.minImage {
				position: absolute;
				bottom: 30rpx;
				left: 50rpx;
				width: 40rpx;
				height: 36rpx;
			}

			.minImage1 {
				left: 150rpx;
			}
		}

		.container_image {
			margin-top: 40rpx;
			display: flex;
			// flex-wrap: wrap;
			align-items: center;
		}

		.container_btn {
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			background-color: #fff;

			button {
				width: 100%;
				// width: 704px;
				height: 96rpx;
				line-height: 96rpx;
				background-color: rgba(253, 211, 56, 1);
				border-radius: 226rpx;
				margin: 30rpx 0;
				font-size: 36rpx;
				font-weight: 500;
			}

			.container_btn_box {
				background-color: rgba(253, 211, 56, 0.5);
			}
		}
	}
</style>
